<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/vue.min.js"></script>
    <script src="js/elementui.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/common.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="label" label="菜单名字" width="180">
            </el-table-column>
            <el-table-column prop="href" label="链接地址" width="180">
            </el-table-column>
            <el-table-column prop="imgicon" label="图标" width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot="header" slot-scope="scope">
                    <el-button size="mini" type="primary" @click="add">增加</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" @click="up(scope.$index, scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 增加菜单 -->
        <el-dialog title="增加菜单" :visible.sync="dialogFormVisibleAdd">
            <el-form :model="formadd">
                <el-form-item label="菜单名字" label-width="80px">
                    <el-input v-model="formadd.label" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="链接地址" label-width="80px">
                    <el-input v-model="formadd.href" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图标" label-width="80px">
                    <i :class="formadd.imgicon"></i>
                    <el-select v-model="formadd.imgicon" placeholder="请选择图标">
                        <el-option v-for="item in imgiconoptions" :key="item" :label="item" :value="item">
                            <i :class="item"></i>
                            <span style="margin-left: 10px">{{ item }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属父级" label-width="80px">
                    <el-cascader :props="parentidProps" :show-all-levels="false" v-model="formadd.parentid"
                        :options="parentidOptions"></el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addsubmit = false">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 编辑菜单 -->
        <el-dialog title="增加菜单" :visible.sync="dialogFormVisibleUp">
            <el-form :model="formup">
                <el-form-item label="菜单名字" label-width="80px">
                    <el-input v-model="formup.label" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="链接地址" label-width="80px">
                    <el-input v-model="formup.href" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图标" label-width="80px">
                    <i :class="formup.imgicon"></i>
                    <el-select v-model="formup.imgicon" placeholder="请选择图标">
                        <el-option v-for="item in imgiconoptions" :key="item" :label="item" :value="item">
                            <i :class="item"></i>
                            <span style="margin-left: 10px">{{ item }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属父级" label-width="80px">
                    <el-cascader :props="parentidProps" :show-all-levels="false" v-model="formup.parentid"
                        :options="parentidOptions"></el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleup = false">取 消</el-button>
                <el-button type="primary" @click="upsubmit = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            imgiconoptions: ["el-icon-platform-eleme", "el-icon-eleme",
  
                "el-icon-orange",
                "el-icon-coffee",
                "el-icon-ice-tea",
                "el-icon-sunny",
                "el-icon-coffee",
                "el-icon-potato-strips",
                "el-icon-lollipop",
                "el-icon-ice-cream-square",
                "el-icon-ice-cream-round",
				"el-icon-alarm-clock",
				"el-icon-watch",
				"el-icon-service",
				"el-icon-chat-dot-square",
				"el-icon-guide",
				"el-icon-smoking",
				"el-icon-no-smoking",
				"el-icon-office-building",
				"el-icon-magic-stick",
				"el-icon-loading",
				"el-icon-s-flag",
				"el-icon-medal-1",
				"el-icon-ship",
				"el-icon-food",
				"el-icon-ice-cream"
				],
            tableData: [],
            dialogFormVisibleAdd: false,
            dialogFormVisibleUp:false,//控制编辑菜单的显示
            formadd: {
                label: "",
                href: "",
                imgicon: "",
                parentid: 0
            },
            formup: {
                id:0,
                label: "",
                href: "",
                imgicon: "",
                parentid: 0
            },
            parentidOptions: [],//父级菜单集合
            parentidProps: {
                value: "id",
                emitPath: false,
                checkStrictly: true
            },//配置父级菜单cascder

        },
        methods: {
            initTableData() {
                let that = this
                axios.get(API + "selectmenu").then(function (res) {
                    that.tableData = res.data.data.menuList
                }).catch(err => {
                    console.log(err)
                });
            },

            up(index, row) {
                this.selectAllMenu()//先填充父级菜单列表
                //根据id获取修改的对象
                let that = this
                axios.get(API + "selectmenubyid/"+row.id).then(function (res) {
                    let menu=res.data.data.menu
                    that.formup=menu
                   console.log(res.data.data)
                }).catch(err => {
                    console.log(err)
                });
                this.dialogFormVisibleUp = true
                console.log(index, row);
            }, add() {
               this.selectAllMenu()
                this.dialogFormVisibleAdd = true
            },selectAllMenu(){
                let that = this
                axios.get(API + "selectmenu").then(function (res) {
                    let arrs = arrayToTree(res.data.data.menuList)
                    that.parentidOptions = arrs
                }).catch(err => {
                    console.log(err)
                });
            },
             addsubmit() {//提交
                console.log(this.formadd)
            },upsbmit(){    
                console.log(this.formup)
            }
        }, mounted() {
            this.initTableData();
        }
    })
</script>

</html>